<template>
    <el-dialog :close-on-click-modal="false" :visible="editOrgFlag" class="zdy-dialog" width="650px" :title="$t('edit')"
               :lock-scroll="false" :before-close="handleCloseDialog">
        <div class="el-dialog-div">
            <el-form :model="form" class="pop-form-box" :rules="rules" ref="ruleForm">
              <!--组织名称-->
              <el-form-item :label="$t('organization name')" prop="name" :rules="$rules.req">
                <el-input v-model="form.name" :minlength="$rules.orgName.min" :maxlength="$rules.orgName.max"
                          show-word-limit></el-input>
              </el-form-item>
            </el-form>
        </div>
        <div class="footBtnBox">
            <el-button size="small" type="handle" @click="handleCloseDialog">{{this.i18n.t('Cancel')}}</el-button>
            <el-button size="small" type="primary" :disabled="saveDisabled" @click="save">{{this.i18n.t('save')}}</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {departmentinfoUpdate} from "@/api/pcmj/zzxx";
    export default {
        name: "editOrg",
        props: {
            editOrgFlag: {
                type: Boolean,
                default: false
            },
            orgRowData: {
                type: Object,
                default: 'add'
            },
        },
        data() {
            var validateName = (rule, value, callback) => {
                if (value == '') {
                    // 请输入组织名称
                    callback(new Error(this.i18n.t('Please enter an organization name')));
                }else if (!this.$rules.orgName.reg.test(value)) {
                    callback(new Error(this.$rules.orgName.min+'~'+this.$rules.orgName.max+' ' + this.i18n.t('bits')));
                }else {
                    callback();
                }
            };
            return {
                rules: {
                    name:[
                        {validator: validateName,required: true, trigger: 'blur'}
                    ]
                },
                defaultProps: {
                    children: 'departmentInfos',
                    label: 'name',
                    checkStrictly: true
                },
                saveDisabled: false,
                form: {
                    name:''
                }
            }
        },
        methods: {
            departmentinfoUpdate(params){
                // 修改组织名称
                departmentinfoUpdate(params).then((res) => {
                    if (res.code === 200) {
                        // 修改成功
                        this.W.$tips("success", this.i18n.t('Modified successfully!'));
                        this.$emit("update:editOrgFlag",false);
                        // 更新左侧组织树
                        this.$parent.getdepartmenttree()
                        // 更新右侧表格
                        this.$parent.onSearch()

                    }
                }).catch().finally(() => {
                    setTimeout(() => {
                        // this.leftTreeLoading = false
                    }, 500)
                })
            },
            save(){
                this.$refs.ruleForm.validate((valid) => {
                        if (valid) {
                            var params={}
                            params=JSON.parse(JSON.stringify(this.orgRowData))
                            // 修改组织名称
                            params.name=this.form.name
                            this.departmentinfoUpdate(params)
                        }else {
                            console.log('error submit!!',this.$refs.ruleForm.validate);
                            return false;
                        }
                })
            },
            handleCloseDialog() {
                this.$emit('update:editOrgFlag', false);
            }
        },
        mounted(){
            this.form.name=this.orgRowData.name
        }
    }
</script>

<style scoped>
    .el-dialog-div {
        height:150px;
        /*overflow-x: hidden;*/
    }
</style>
